<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>猜数游戏-固定数字的猜数逻辑</title>
	<script src="../js/vue.js"></script>
	<style>
		div#app {
			width: 250px;
			margin: 30px auto;
			border: 1px solid #666;
			border-radius: 10px;
			padding: 10px;
		}

		p {
			text-align: center;
		}
	</style>
</head>

<body>
	<div id="app">
		<p>
			<input type="text" placeholder="猜数游戏" v-model="num"/>
		</p>
		
		<p>{{msg}}</p>
	</div>
	<script>
		Vue.createApp({
			data() {
				return {
					// msg: "请输入你所猜的数",
					num: ""
				}
			},
			// 计算属性
			computed: {
				msg(){
					if (this.num == 60) {
						return "猜对了";
					} else if (this.num < 60) {
						return "往大猜";
					} else {
						return "往小猜";
					}
				}

			}

		}).mount('#app')
	</script>
</body>

</html>